<template>
    <div class="inventory-query p-4">
        <!-- Header Controls -->
        <el-form>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="选择时间">
                        <el-date-picker v-model="date" type="date" placeholder="选择日期" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" />
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <!-- <el-card class="mb-4"> -->
                    <div class="buttonClass">
                        <el-button type="primary" @click="handleQuery">查询</el-button>
                        <el-button type="primary" @click="handleExport">导出</el-button>
                    </div>
                    <!-- </el-card> -->
                </el-col>
            </el-row>
        </el-form>

        <!-- Table -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="70" />
            <el-table-column prop="firstLevel" label="一级目录" />
            <el-table-column prop="secondLevel" label="二级目录" />
            <el-table-column prop="categoryName" label="品类名称" />
            <el-table-column prop="unit" label="单位" />
            <el-table-column prop="specification" label="规格" />
            <el-table-column prop="previousDayStock" label="前一天存量" />
            <el-table-column prop="inStock" label="当天进货" />
            <el-table-column prop="outStock" label="当天出货" />
            <el-table-column prop="stock" label="库存量" />
            <el-table-column prop="purchasePrice" label="最近的一次价格" />
            <el-table-column prop="address" label="库存地" />

        </el-table>

        <!-- Pagination -->
        <div class="flex justify-between items-center mt-4">
            <span class="text-sm text-gray-500">
                共 {{ total }} 条记录 第 {{ currentPage }} / {{ totalPages }} 页
            </span>
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]"
                :small="small" :disabled="disabled" :background="background"
                layout="total, prev, pager, next, sizes, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getinventoryPage } from '@/utils/category';

// Data
const date = ref(new Date().toLocaleDateString().replace(/\//g, '-'))
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(400)

const tableData = ref([])

// Computed
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))

onMounted(() => {
    search()
})
// Methods
const search = () => {
    getinventoryPage({ date: date.value }, currentPage.value, pageSize.value).then(res => {
        if (res.code == 200) {
            tableData.value = res.data.records
            total.value = res.data.total
        } else {
            ElMessage.error(res.message)
        }
    })
}

const handleQuery = () => {
    search()
}

const handleExport = () => {
    window.location.href = `/api/inventory/export/?date=${date.value}`
}

const handleSizeChange = (val) => {
    pageSize.value = val
    ElMessage.success(`每页 ${val} 条`)
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    search()
}
</script>

<style scoped>
.inventory-query :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
    background-color: #409eff;
}

.el-pagination {
    float: right;
}
</style>